<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>lu_changeLogo 更换头像</title>
    <link rel="stylesheet" href="ADMIN_PUBLIC/css/lu_common.css">
    <style>
        #upload_pic{
            position: relative;
            /*top:30px;*/
            /*left:300px;*/
            /*z-index: 100;*/
            width:540px;
            height:400px;
            text-align: center;
            margin: 50px 0 0 100px;
        }
        .change_logo{
            display: flex;
            align-items: flex-start;
            padding: 60px 0 0 60px;
        }
        .change_logo>span{
            padding-top:5px;
        }
        .upload_pic_box{
            width:150px;
            height:150px;
            position: relative;
            margin-left:50px;
        }
        .upload_pic_box>img{
            width:100%;
            height:100%;
        }
        .upload_pic_box>input{
            width:100%;
            height:100%;
            position: absolute;
            top:0;
            left:0;
            bottom:0;
            right:0;
            opacity: 0;
        }
        #upload_pic>p{
            color: #bbb;
            font-size:12px;
            margin-top:32px;
        }
        #upload_pic>button{
            width:450px;
            height:60px;
            border: none;
            background-image: linear-gradient(to right, #3E7BE8, #229FE0);
            color: #fff;
            font-size:20px;
            margin-top:52px;
        }
        #isok{
            width:540px;
            height:400px;
            text-align: center;
            margin: 50px 0 0 100px;
            padding:30px;
        }
        #isok>p.title{
            color:#555;
            font-size:24px;
        }
        #isok>div{
            display:inline-block;
            width:120px;
            height:120px;
            background:url('ADMIN_PUBLIC/img/upload_pic.png');
            margin:56px 0;
        }
        #isok>p.tip{
            color:#999;
            font-size:20px;
        }
        #upload_pic, #isok{
            display:none
        }
        #upload_pic.active, #isok.active{
            display:block
        }
    </style>
</head>
<body class="color_fff">
<div id="upload_pic" class='active'>
    <div class="change_logo">
        <span>上传头像：</span>
        <div class="upload_pic_box">
            <img src="ADMIN_PUBLIC/img/上传执照@2x.png" alt="">
            <input type="file" id='file'>
        </div>
    </div>
    <p>注：上传头像尺寸为64*64px，大小不得超过100M！上传完之后，请刷新页面进行查看！</p>
    <button>上传头像</button>
</div>

<div id='isok'>
    <p class='title'>上传成功</p>
    <div></div>
    <p>头像上传成功，请刷新网页!</p>
</div>

<script src="ADMIN_PUBLIC/js/jquery.min.js"></script>
<script>
    $('#file').change(function(){
        let data = this.files;
        for(let i =0;i<data.length;i++){
            let imgReader = new FileReader();
            imgReader.readAsDataURL(data[i]);
            imgReader.onload = function (e){
                let url = this.result;
                $('#file').siblings('img').attr('src',url)
                $('#file').siblings('img').attr('data-up','ok')
            }
        }
    })
    $('button').click(function(){
        if($('#file').siblings('img').attr('data-up')=='ok'){
            $.ajax({
                url:'http://zsjjkc.youledi.cn/Admin/ComInfo/uploadLogo',
                type:'post',
                data:{
                    logo:$('#file').siblings('img').attr('src')
                },
                success:function(data){
                    if(data.code==1){
                        $('#upload_pic').removeClass('active')
                        $('#isok').addClass('active')
                    }
                }
            })

        }
        
    })
</script>
</body>
</html>